<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.0/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .chat-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .message-container {
            height: 400px;
            border: 1px solid #ccc;
            overflow-y: auto;
            margin-bottom: 20px;
            padding: 10px;
        }
        .input-container {
            display: flex;
            gap: 10px;
        }
        input {
            flex: 1;
            padding: 5px;
        }
        button {
            padding: 5px 15px;
        }
    </style>
</head>
<body>
    <div>
        <h2>Login</h2>
        <input type="text" id="username" placeholder="Username">
        <input type="password" id="password" placeholder="Password">
        <button onclick="login()">Login</button>
    </div>
    <div id="chat" style="display: none;">
        <h2>Chat</h2>
        <input type="text" id="message" placeholder="Type a message">
        <button onclick="sendMessage()">Send</button>
        <div id="messages"></div>
    </div>

    <script>
        let stompClient = null;
        let token = null;

        function login() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            axios.post('/api/login', {
                username: username,
                password: password
            })
            .then(response => {
                token = response.data.token;
                document.getElementById('chat').style.display = 'block';
                connectWebSocket();
            })
            .catch(error => {
                console.error('Login failed:', error);
                alert('Login failed');
            });
        }

        function connectWebSocket() {
            const socket = new SockJS('/ws');
            stompClient = Stomp.over(socket);
            
            const headers = {
                'Authorization': 'Bearer ' + token
            };

            stompClient.connect(headers, function(frame) {
                console.log('Connected: ' + frame);
                stompClient.subscribe('/topic/messages', function(message) {
                    showMessage(JSON.parse(message.body));
                });
            }, function(error) {
                console.error('WebSocket connection error:', error);
                alert('WebSocket connection failed');
            });
        }

        function sendMessage() {
            const message = document.getElementById('message').value;
            if (message && stompClient) {
                stompClient.send("/app/chat", {}, JSON.stringify({
                    'content': message
                }));
                document.getElementById('message').value = '';
            }
        }

        function showMessage(message) {
            const messagesDiv = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.textContent = message.content;
            messagesDiv.appendChild(messageElement);
        }
    </script>
</body>
</html> 